<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="uiTop">
    <div class="box">
      <div class="item1">
        <div>选择文件：</div>
        <div class="texture-img2">
          <el-input v-model="url" :disabled="true" />
          <!-- @vue-expect-error -->
          <input v-show="false" ref="upfileRef" type="file" title=" " @change="upLoadFile" multiple="multiple"
            style="display: none" />
          <div class="list-img choose2" @click="selectZipFile" title="选择"></div>
        </div>
      </div>
      <el-table v-if="tableData.length" :data="tableData" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
        :highlight-current-row="false">
        <el-table-column prop="key" label="字段" :show-overflow-tooltip="true" width="100" />
        <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto" />
      </el-table>
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
  createVueDisposer
} from "earthsdk-ui";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { MonomerEdit } from "@/scripts/modelser2Manager/monomerEdit";
import { cellStyle2, cellStyleSmall } from "@/scripts/tableStyle";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 300;
// const uiTop = document.body.clientHeight - 40 - 200;
const uiTop = ref(60);

const url = ref("");

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const modelser2Manager = getProjectManager().modelser2Manager;
const monomerEdit = modelser2Manager.monomerEdit as MonomerEdit;


// 上传文件
const upfileRef = ref<any>(null)

async function selectZipFile() {
  upfileRef.value?.click()
}

let arr: any = []

// 定义一个函数来判断文件是否为压缩包
const isCompressedFile = (fileName: string) => {
  const compressedExtensions = ['.zip', '.rar', '.7z'];
  return compressedExtensions.some(ext => fileName.toLowerCase().endsWith(ext));
};

const upLoadFile = async (e: any) => {
  const files = e.target.files;
  if (!files || files.length === 0) return;

  // 将文件名添加到 arr 中
  for (let i = 0; i < files.length; i++) {
    arr.push(files[i].name);
  }

  let filesData = new FormData();
  let hasCompressedFile = false;

  for (let i = 0; i < files.length; i++) {
    filesData.append('file', files[i]);
    if (isCompressedFile(files[i].name)) {
      hasCompressedFile = true;
    }
  }

  try {
    if (hasCompressedFile) {
      url.value = await monomerEdit.uploadShpZip(filesData);
    } else {
      url.value = await monomerEdit.uploadShp(filesData);
    }
    console.log('文件上传成功，URL:', url.value);
  } catch (error) {
    console.error('文件上传失败:', error);
  }
};

const tableData = ref<any>([]);

watch(url, async () => {
  let path = new FormData()
  path.append('path', url.value)
  const res = await monomerEdit.getShpFeatures(path);
  // tableData.value = res.map((item: any) => {
  //   return Object.entries(item.prop).map((item2: any) => {
  //     return {
  //       key: item2[0],
  //       value: item2[1]
  //     };
  //   })
  // })
  tableData.value = Object.entries(res[0].prop).map((item: any) => {
      return {
        key: item[0],
        value: item[1]
      };
    })
  console.log("tableData", tableData.value);
})

onMounted(() => {
});
onBeforeUnmount(() => {

});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 10px;
}

.texture-img2 {
  display: grid;
  grid-template-columns: 1fr 25px;
  gap: 0 10px;
  align-items: center;

}


.list-img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.choose2 {
  background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
  background-size: 100% 100%;
}
</style>